<!DOCTYPE html>
<html class="ui-page-login">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>个人中心</title>
    <link href="../../css/mui.css" rel="stylesheet"/>
    <link href="../../css/reset.css" rel="stylesheet"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="address=no">
    <script src="../../js/jquery.min.js"></script>
    <script type="text/javascript">
        var docEl = document.documentElement;
        var clientWidth = docEl.clientWidth;
        docEl.style.fontSize = (clientWidth / 10) + 'px';
        $(document).ready(function () {
            (function (doc, win) {
                var docEl = doc.documentElement,
                        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                        recalc = function () {
                            var clientWidth = docEl.clientWidth;
                            docEl.style.fontSize = (clientWidth / 10) + 'px';
                        };

                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window);
        });
    </script>
</head>

<body>
<article class="mui-content user-index">
    <section class="user-info mui-text-center">
        <div class="sign-btn active">
            <a href="signin.html">登录/注册</a>
        </div>
        <div class="info-box mui-text-center">
            <div class="img-box"><a href="userinfo.html"><img class="user-img" src="../../img/default-user.png"></a></div>
            <p class="user-name"></p>
        </div>
    </section>
    <section class="user-panel">
        <ul class="panel-heading mui-table-view">
            <li class="mui-table-view-cell"><a class="mui-navigate-right">我的订单<span class="mui-pull-right">查看全部订单</span></a></li>
        </ul>
        <ul class="panel-body mui-row">
           <li class="mui-col-xs-3">
               <a>
                   <span class="mui-icon icon-user-1"></span>
                   <div>待付款</div>
               </a>
           </li>
            <li class="mui-col-xs-3">
                <a>
                    <span class="mui-icon icon-user-2"></span>
                    <div>待发货</div>
                </a>
            </li>
            <li class="mui-col-xs-3">
                <a>
                    <span class="mui-icon icon-user-3"></span>
                    <div>待收货</div>
                </a>
            </li>
            <li class="mui-col-xs-3">
                <a>
                    <span class="mui-icon icon-user-4"></span>
                    <div>待评价</div>
                </a>
            </li>
            <li class="mui-col-xs-3">
                <a>
                    <span class="mui-icon icon-user-5"></span>
                    <div>我的团</div>
                </a>
            </li>
            <li class="mui-col-xs-3">
                <a>
                    <span class="mui-icon icon-user-6"></span>
                    <div>我的抽奖</div>
                </a>
            </li>
            <li class="mui-col-xs-3">
                <a href="bargain.html">
                    <span class="mui-icon icon-user-7"></span>
                    <div>我的砍价</div>
                </a>
            </li>
            <li class="mui-col-xs-3">
                <a href="cheap.html">
                    <span class="mui-icon icon-user-8"></span>
                    <div>我的捡便宜</div>
                </a>
            </li>
        </ul>
    </section>
    <section class="user-item">
    <ul class="mui-table-view no-padding">
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right" href="coupon.html">
                我的优惠卷
            </a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right" href="food.html">
                足迹
            </a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right" href="follow.html">
                我的收藏
            </a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
                常见问题
            </a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
                在线客服
                <span class="mui-pull-right">400-400-400</span>
            </a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right" href="set.html">
                设置
            </a>
        </li>
    </ul>
    </section>
</article>
<nav class="mui-bar mui-bar-tab">
    <a class="r-tab-item" href="../index/index.html">
        <span class="mui-icon act-index"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="r-tab-item" href="../myGroup/shopingCart.html">
        <span class="mui-icon act-gwc"></span>
        <span class="mui-tab-label">购物车</span>
    </a>
    <a class="r-tab-item mui-active" href="../user/user.html">
        <span class="mui-icon act-user"></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>
<script src="../../js/mui.min.js"></script>
<script src="../../js/main.js"></script>
<script>
    $(function(){
        if( isLogin() ){
            var user = getUserInfo();
            var event = {
                loadInfo: function(){
                    $('.user-info .sign-btn').removeClass('active');
                    $('.user-info .info-box').addClass('active').find('.img-box img').attr('src', user.avatar_url ? user.avatar_url : '../img/default-user.png');
                    $('.user-info .info-box .user-name').text(user.nickname);
                },
                loadOrdernum: function(){
                    var data = {
                        apiCode: '_ordernum_001',
                        userToken: user.userToken
                    };
                    http(data, function (responed) {
                        if (responed.error == 0) {
                            if( responed.info ){
                                if( responed.info.waitpay ){
                                    $('.mui-icon.icon-user-1').html('<span class="mui-badge">'+(responed.info.waitpay > 99 ? '...' : responed.info.waitpay)+'</span>');
                                }
                                if( responed.info.deliver ){
                                    $('.mui-icon.icon-user-2').html('<span class="mui-badge">'+(responed.info.waitpay > 99 ? '...' : responed.info.deliver)+'</span>');
                                }
                                if( responed.info.receipt ){
                                    $('.mui-icon.icon-user-3').html('<span class="mui-badge">'+(responed.info.waitpay > 99 ? '...' : responed.info.receipt)+'</span>');
                                }
                                if( responed.info.score ){
                                    $('.mui-icon.icon-user-4').html('<span class="mui-badge">'+(responed.info.waitpay > 99 ? '...' : responed.info.score)+'</span>');
                                }
                            }
                        } else {
                            mui.alert(responed.info);
                        }
                    });
                },
                init: function(){
                    this.loadInfo();
                    this.loadOrdernum();
                }
            };
            event.init && event.init();
        }
    });
</script>
</body>

</html>